<div id="formDiv"></div>
<script type="text/html" id="warehouseProductionOrderformContent">
  <form lay-filter="warehouseProductionOrderForm" id="warehouseProductionOrderForm" class="layui-form open-form">
    <div class="open-model">
      <div class="open-auto">
        <div>
          <div class="layui-form-item layui-row">
            <input name="id" type="hidden" />
            <input name="productId" id="productId" type="hidden" />
            <div class="layui-inline layui-col-md3">
              <label class="layui-form-label">选择生产计划</label>
              <input  name="productionPlanCode" type="hidden" />
              <div class="layui-input-block">
                  <select id="productionPlanId" name="productionPlanId" lay-filter="productionPlanId"></select>
              </div>
            </div>
            <div class="layui-inline layui-col-md3">
              <label class="layui-form-label">所属生产订单</label>
              <div class="layui-input-block">
                <input class="layui-input adv-disable" id="productionOrderNumber" disabled name="productionOrderNumber" />
              </div>
            </div>

            <div class="layui-inline layui-col-md3">
              <label class="layui-form-label">产成品料号</label>
              <div class="layui-input-block">
                <input type="text" class="layui-input" disabled id="customerProductCode" name="customerProductCode" />
              </div>
            </div>
            <div class="layui-inline layui-col-md3">
              <label class="layui-form-label">产成品规格码</label>
              <div class="layui-input-block">
                <input type="text" class="layui-input" disabled id="productSpecCode" name="productSpecCode" />
              </div>
            </div>


          </div>
          <div class="layui-form-item layui-row">

            <div class="layui-inline layui-col-md3">
              <label class="layui-form-label">计划产量</label>
              <div class="layui-input-block">
                <input class="layui-input adv-disable" id="plannedQuantity" disabled name="plannedQuantity" />
              </div>
            </div>
            <div class="layui-inline layui-col-md3">
              <label class="layui-form-label">原料料号</label>
              <input type="hidden" name="materialNumber" id="materialNumber" />
              <div class="layui-input-block">
                 <button class="layui-btn layui-btn-sm" id="materialDetail" title="无物料" style="overflow: hidden;width: 100%;" type="button">无物料</button>
              </div>
            </div>

            <div class="layui-inline layui-col-md3">
              <label class="layui-form-label">计划交货时间</label>
              <div class="layui-input-block">
                <input type="text" class="layui-input " id="plannedDeliveryTime" disabled name="plannedDeliveryTime" />
              </div>
            </div>
          </div>
          <div class="layui-form-item layui-row">
            <div class="layui-inline layui-col-md3">
              <label class="layui-form-label"> 制造令</label>
              <input name="productionSchedulingPlanDetailCode" type="hidden" />
              <input  name="productionOrderNumber" type="hidden" />
              <div class="layui-input-block">
                <select id="productionSchedulingPlanDetailId" name="productionSchedulingPlanDetailId" lay-filter="productionSchedulingPlanDetailId"></select>
              </div>
            </div>
            <div class="layui-inline layui-col-md3">
              <label class="layui-form-label">选择车间</label>
              <input type="hidden" name="workshopId" id="workshopId" />
              <div class="layui-input-block">
                <input type="text" class="layui-input"  disabled name="workshopName" />
              </div>
            </div>
             <div class="layui-inline layui-col-md3">
              <label class="layui-form-label">选择产线</label>
              <input type="hidden" name="productionLineId" id="productionLineId" />
              <div class="layui-input-block">
                <input type="text" class="layui-input" disabled name="productionLineName" />
              </div>
            </div>
            <div class="layui-inline layui-col-md3">
              <label class="layui-form-label">计划生产时间</label>
              <div class="layui-input-block">
                <input class="layui-input adv-disable" id="plannedProductionTime" disabled name="plannedProductionTime" />
              </div>
            </div>
          </div>
          <div class="layui-form-item layui-row">
            <div class="layui-inline layui-col-md3">
              <label class="layui-form-label">生产计划备注</label>
              <div class="layui-input-block">
                <input type="text" class="layui-input" disabled name="productionPlanRemark" />
              </div>
            </div>
            <div class="layui-inline layui-col-md3">
              <label class="layui-form-label">出库仓库</label>
              <input type="hidden" name="warehouseName" id="warehouseName" />
              <div class="layui-input-block">
                <select id="warehouseId" name="warehouseId" lay-filter="warehouseId"></select>
              </div>
            </div>
           </div>
        <div class="layui-form-item tableContent">
          <!-- {{# if(d.eventName !== 'detail'){ }} -->
          <button class="layui-btn" type="button" id="Configure">配置成品物料明细信息</button>
          <!-- {{# } }} -->
          <table class="layui-table" id="warehouseMaterialRequisitionRecordFormTable" lay-filter="warehouseMaterialRequisitionRecordFormTable"></table>
        </div>

        <div class="layui-form-item text-right">
          <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">关闭</button>
          <button class="layui-btn" lay-filter="formSubmit" type="button" lay-submit>提交</button>
        </div>
      </div>
    </div>
  </form>
</script>

<script type="text/html" id="warehouseMaterialRequisitionRecordFormTableBar">
  <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" type="button">删除</button>
</script>
<script type="text/html" id="customerSku">
  <div class="open-form">
    <div class="open-model">
      <div class="open-auto">
        <button class="layui-btn " id="addCustomerSku">确认选择</button>
        <table class="layui-table" id="customerSkuTable"></table>
      </div>
    </div>
  </div>
</script>
<script type="text/html" id="warehouseMaterialRequisitionRecordForm">
  <div class="open-form">
    <div class="open-model">
      <div class="open-auto">
        <table class="layui-table" id="warehouseMaterialRequisitionRecordTable" lay-filter="warehouseMaterialRequisitionRecordTable"></table>
      </div>
    </div>
  </div>
</script>
<script>
  layui.use(["layer", "form", "table", "admin", "laydate", "upload", "laytpl"], async function () {
    var $ = layui.jquery;
    var layer = layui.layer;
    var form = layui.form;
    var table = layui.table;
    var config = layui.config;
    var admin = layui.admin;
    var upload = layui.upload;
    let laydate = layui.laydate;
    let laytpl = layui.laytpl;
    const nowData = { ...parentData };
    let data = nowData?.data;
    let skuList = [];

    laytpl(warehouseProductionOrderformContent.innerHTML).render({ ...nowData }, function (html) {
      $("#formDiv").after(html);
    });
    // 初始化日期选择

    await admin.initDataSelectPro(
      "warehouse/warehouse/productionSchedulingPlan/list",
      { limit: 99999 },
      "productionPlanId",
      "生产计划",
      async (d, obj) => {
        $("#productionSchedulingPlanDetailId").empty();
        form.val("warehouseProductionOrderForm", {
          productionSchedulingPlanDetailId: "",
          productionPlanCode: "",
          productionOrderNumber: "",
          plannedQuantity: "",
          plannedDeliveryTime: "",
          plannedProductionTime: "",
          customerProductCode: "",
          productSpecCode: "",
          workshopName: "",
          productionLineName: "",
          productionPlanRemark: "",
          productionUserBundleCodePlanCode: "",
          sysBundleCode: "",
          productProducerName: "",
          productVariety: "",
          productMark: "",
          productBrand: "",
          productMainUnit: "",
          grossWeight: "",
          netWeight: ""
        });
        $("#materialDetail").text("无物料");
        $("#materialDetail").attr("title", "无物料");
        if (d.value) {
          const { data } = await admin.reqPro("warehouse/warehouse/productionSchedulingPlan/selectProductionSchedulingPlanDetail", { id: d.value });
          admin.initDataSelect(data.warehouseProductionSchedulingPlanDetailList, {}, "productionSchedulingPlanDetailId", null, "制造令", "code", "id");
          form.on("select(productionSchedulingPlanDetailId)", function (d) {
            form.val("warehouseProductionOrderForm", { workshopName: "", productionLineName: "", plannedProductionTime: "", productionPlanRemark: "" });
            if (d.value) {
              const obj1 = data.warehouseProductionSchedulingPlanDetailList.find((v) => v.id == d.value);
              form.val("warehouseProductionOrderForm", { ...obj1, productionPlanRemark: obj1.remark, productionSchedulingPlanDetailCode: obj1.code });
            }
          });
          form.val("warehouseProductionOrderForm", { ...data, customerProductCode: data.productCode });
          $("#materialDetail").text(data.materialNumber ? data.materialNumber : "无物料");
          $("#materialDetail").attr("title", data.materialNumber ? data.materialNumber : "无物料");
        }
      },
      "productionPlanCode"
    );
    await admin.initDataSelectPro("warehouse/warehouse/admin/administration/list", { limit: 99999 }, "warehouseId", "仓库", async (d, obj) => {
      $("#warehouseName").val("");
      if (d.value) {
        $("#warehouseName").val(obj.name);
      }
    });
    if (nowData.eventName === "detail") {
      admin.setFormDisable("#warehouseProductionOrderForm", true);
    }

    const tableVal = table.render({
      elem: "#warehouseMaterialRequisitionRecordFormTable",
      page: false,
      limit: 999999,
      height: 400,
      data: [],
      cols: [
        [
          { type: "numbers", title: "序号" },
          { field: "sysBundleCode", align: "center", title: "客户捆包号" },
          { field: "userBundleCode", align: "center", title: "内部捆包号" },
          { field: "productProducerName", title: "生产厂家" },
          { field: "productVariety", title: "品种" },
          { field: "productMark", title: "牌号" },
          { field: "productBrand", title: "品牌" },
          { field: "productMainUnit", title: "单位" },
          { field: "grossWeight", title: "单位毛重" },
          { field: "netWeight", title: "单位净重" },
          // { field: "warehouseMaterialRequisitionRecordPerson", title: "入库作业人" },
          // { field: "warehouseMaterialRequisitionRecordTime", title: "入库作业时间" },
          { title: "操作", toolbar: "#warehouseMaterialRequisitionRecordFormTableBar" }
        ]
      ]
    });
    if (data && data.id) {
      const res = await admin.reqPro("warehouse/warehouse/productionSchedulingPlan/selectProductionSchedulingPlanDetail", { id: data.productionPlanId });
      admin.initDataSelect(res.data.warehouseProductionSchedulingPlanDetailList, {}, "productionSchedulingPlanDetailId", data.productionSchedulingPlanDetailId, "制造令", "code", "id");
      table.reload("warehouseMaterialRequisitionRecordFormTable", {
        data: data.warehouseMaterialRequisitionRecordDetailList
      });
      form.on("select(productionSchedulingPlanDetailId)", function (d) {
        form.val("warehouseProductionOrderForm", { workshopName: "", productionLineName: "", plannedProductionTime: "", productionPlanRemark: "" });
        if (d.value) {
          const obj1 = data.warehouseProductionSchedulingPlanDetailList.find((v) => v.id == d.value);
          form.val("warehouseProductionOrderForm", { ...obj1, productionPlanRemark: obj1.remark, productionSchedulingPlanDetailCode: obj1.code });
        }
      });
      form.val("warehouseProductionOrderForm", { ...data, customerProductCode: data.productCode });
      $("#materialDetail").text(data.materialNumber ? data.materialNumber : "无物料");
      $("#materialDetail").attr("title", data.materialNumber ? data.materialNumber : "无物料");
      // await admin.initDataSelectPro(
      //   "warehouse/warehouse/productionSchedulingPlanDetail/list",
      //   {
      //     productionPlanId: data.productionPlanId
      //   },
      //   "productionSchedulingPlanDetailId",
      //   "生产订单编号",
      //   async (d, obj) => {},
      //   "productionPlanCode"
      // );
      // const res = await admin.reqPro("warehouse/warehouse/productionOrder/selectProductionDetail", { id: data.productionSchedulingPlanDetailId });
      // form.val("warehouseProductionOrderForm", data);
      // 生产计划详情和制造令详情公用一个  区别有无productId
    }

    form.on("submit(formSubmit)", function (d) {
      let formData = { ...d.field };
      formData.warehouseMaterialRequisitionRecordDetailList = table.cache["warehouseMaterialRequisitionRecordFormTable"];

      if (nowData.eventName == "add") {
        delete formData.id;
        console.log(formData);
        formData.requisitionQuantity = table.cache["warehouseMaterialRequisitionRecordFormTable"].length;
        admin.req(
          "warehouse/warehouse/materialRequisitionRecord/add",
          JSON.stringify(formData),
          function (res) {
            layer.closeAll("loading");
            if (res.code == 200) {
              layer.msg(res.msg, { icon: 1 });
              table.reload("ProductionOrderTable");
              layer.closeAll("page");
            } else {
              layer.msg(res.msg, { icon: 2, time: 1000 });
            }
          },
          "POST",
          false,
          "application/json"
        );
      } else if (nowData.eventName == "edit") {
        admin.req(
          "warehouse/warehouse/productionSchedulingPlan/update",
          JSON.stringify(formData),
          function (res) {
            layer.closeAll("loading");
            if (res.code == 200) {
              layer.msg(res.msg, { icon: 1 });
              table.reload("ProductionOrderTable");
              layer.closeAll("page");
            } else {
              layer.msg(res.msg, { icon: 2, time: 1000 });
            }
          },
          "POST",
          false,
          "application/json"
        );
      }
      return false;
    });
    table.on("tool(warehouseMaterialRequisitionRecordFormTable)", function (obj) {
      var d = obj.data; // 获取当前行的数据
      var layEvent = obj.event; // 获取事件名（edit 或 del）
      if (obj.tr) {
        obj.tr.on("click", function (e) {
          e.preventDefault(); // 防止默认行为
        });
      }
      if (layEvent == "del") {
        const index = $(obj.tr[0]).data("index");
        let list = table.cache["warehouseMaterialRequisitionRecordFormTable"].filter((v) => {
          return v["LAY_TABLE_INDEX"] != index;
        });
        table.reload("warehouseMaterialRequisitionRecordFormTable", {
          data: list
        });
      }
    });
    $("#Configure").click(function () {
      admin.formOpen({
        area: "90%",
        offset: "10%",
        title: "物料详情",
        path: "/admin/components/warehouse/product/productDetailTable.html",
        success: function () {
          if (!$("#productId").val()) {
            layer.msg("请先选择产品");
            return false;
          }
          parentData.warehouseProductId = $("#productId").val();
          parentData.warehouseId = $("#warehouseId").val();
          parentData.bundleCodeList = table.cache["warehouseMaterialRequisitionRecordFormTable"].map((v) => v.productDetailId);
        },
        end: function () {
          if (childData.list) {
            let list = [...childData.list, ...table.cache["warehouseMaterialRequisitionRecordFormTable"]];
            table.reload("warehouseMaterialRequisitionRecordFormTable", {
              data: list
            });
          }
        }
      });
    });
    // $("#materialDetail").click(function () {
    //   if (!$("#productionPlanId").val()) {
    //     layer.msg("请先选择生产计划");
    //     return false;
    //   }
    //   if ($("#materialNumber").val()) {
    //     let zindex = admin.formOpen({
    //       area: "90%",
    //       offset: "10%",
    //       title: "物料详情",
    //       content: $("#warehouseMaterialRequisitionRecordForm").html(),
    //       success: function () {
    //         // if (nowData.eventName === "detail") {
    //         //   admin.setFormDisable("#warehouseMaterialRequisitionRecordForm", true);
    //         // }
    //         // parentData.list = d.materialNumber;
    //         admin.req(
    //           "warehouse/warehouse/product/list",
    //           {
    //             limit: 999999,
    //             productIds: $("#materialNumber").val().split(",")
    //           },
    //           (res) => {
    //             table.render({
    //               elem: "#warehouseMaterialRequisitionRecordTable",
    //               // url: config.base + "warehouse/warehouse/product/list",
    //               data: res.data,
    //               page: false,
    //               cols: [
    //                 [
    //                   { field: "productVariety", align: "center", title: "品种" },
    //                   { field: "productCode", align: "center", title: "客户成品料号" },
    //                   { field: "productSpecCode", align: "center", title: "规格" },
    //                   { field: "diameter", align: "center", title: "厚度/壁厚/直径" },
    //                   { field: "width", align: "center", title: "宽度/外径" },
    //                   { field: "length", align: "center", title: "长度" },
    //                   { field: "productMainUnit", align: "center", title: "成品单位" }
    //                 ]
    //               ]
    //             });
    //           }
    //         );
    //       }
    //     });
    //   } else {
    //     layer.msg("当前产品未配置材料");
    //   }
    // });

    $("#warehouseProductionOrderForm .layui-table-body").css("overflow", "visible");
    $("#warehouseProductionOrderForm .layui-table-box").css("overflow", "visible");
    $("#warehouseProductionOrderForm .layui-table-view").css("overflow", "visible");
  });
</script>

<style>
  #warehouseProductionOrderForm .layui-form-label {
    width: 125px;
  }

  #warehouseProductionOrderForm .layui-input-block {
    margin-left: 155px;
  }

  #warehouseProductionOrderForm .layui-form-item .layui-inline {
    /* margin-bottom: 5px; */
    margin-right: 0px;
  }
  #warehouseProductionOrderForm .layui-table-cell {
    overflow: visible !important;
  }
</style>
